@import "variables";

.brand-border(@color:#fff) {
  border: 1px solid darken(@color, 5%);
}

//透明度
.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

.prefix(@css,@value) {
  .key-css(@pre) {
    @key: ~"@{pre}@{css}";
    @{key}: @value;
  }
  .key-css("-moz-");
  .key-css("-webkit-");
  .key-css("-o-");
  .key-css("-ms-");
  .key-css("");
}

//简单圆角
.rounded-corners (@radius: 5px) {
  .prefix("border-radius", @radius);
}

//方块阴影
//.box-shadow(@s1,@s2){
//  @s:~"@{s1},@{s2}";
//  .box-shadow(@s);
//}
.box-shadow(@shadow) {
  .prefix("box-shadow", @shadow);
}

.text-shadow(@shadow) {
  .prefix("text-shadow", @shadow);
}

//元素过滤效果
.transition(@t1,@t2...) {
  @t: ~"@{t1},@{t2}";
  .prefix("transition", @t);
}

.transition(@t) {
  .prefix("transition", @t);
}

//转换/旋转
.transform(@t) {
  .prefix("transform", @t);
}

.animation(@a) {
  .prefix("animation", @a);
}

//颜色渐变
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
  background-color: @start;
  background-image: -webkit-linear-gradient(@origin,@start,@stop);
  background-image: -moz-linear-gradient(@origin,@start,@stop);
  background-image: -o-linear-gradient(@origin,@start,@stop);
  background-image: -ms-linear-gradient(@origin,@start,@stop);
  background-image: linear-gradient(@origin,@start,@stop);
}

//快速渐变
.quick-gradient (@origin: left, @alpha: 0.2) {
  background-image: -webkit-linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
  background-image: -moz-linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
  background-image: -o-linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
  background-image: -ms-linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
  background-image: linear-gradient(@origin, rgba(0, 0, 0, 0.0), rgba(0, 0, 0,@alpha));
}

//镜像效果
.reflect (@length: 50%, @opacity: 0.2) {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255, 255, 255,@opacity)));
}

.user-select (@select:none) {
  .prefix("user-select", @select);
}

.tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.inline-block() {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.brand-crumbs() {
  background-color: #f5f5f5;
  list-style: none;
  line-height: 30px;
  height: 30px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  dt,
  dd {
    display: inline;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  dt {

  }
  dd {
    a {
      color: @brand-primary;
    }
    &.active {
      color: @gray-light;
    }
    *padding: 0 6px;
    *border-left: 1px solid #ccc;
  }
  dd + dd:before {
    content: " / ";
    color: #ccc;
    padding: 0 3px;
  }
}

.angle() {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
}

//左三角
.angle-left(@size,@color,@width:@size) {
  .angle;
  border-style: dashed solid none none;
  border-width: @size @width @size 0;
  border-color: transparent @color transparent;
}

//右三角
.angle-right(@size,@color,@width:@size) {
  .angle;
  border-style: dashed dashed dashed solid;
  border-width: @size 0 @size @width;
  border-color: transparent transparent transparent @color;
}

.angle-top(@size,@color,@width:@size) {
  .angle;
  border-style: dashed dashed solid dashed;
  border-width: 0 @size @width @size;
  border-color: transparent transparent @color transparent;
}

.angle-bottom(@size,@color,@width:@size) {
  .angle;
  border-style: solid dashed dashed dashed;
  border-width: @width @size 0 @size;
  border-color: @color transparent transparent;
}

.linkColor(@color,@hoverColor:@color,@decoration:none) {
  a:link,
  a:active,
  a:visited {
    color: @color;
    text-decoration: none;
  }
  a:hover {
    color: @hoverColor;
    text-decoration: @decoration;
  }
}